MudBlazor - Blazor Component Library

Basic switches

<MudSwitch @bind-Value="Basic_Switch1" />
<MudSwitch @bind-Value="Basic_Switch2" Color="Color.Primary" />
<MudSwitch @bind-Value="Basic_Switch3" Color="Color.Secondary" />
<MudSwitch T="bool" Disabled="true" />

@code{
    public bool Basic_Switch1 { get; set; } = false;
    public bool Basic_Switch2 { get; set; } = true;
    public bool Basic_Switch3 { get; set; } = true;
}

Color

<MudSwitch @bind-Value="Basic_Switch1" Color="Color.Success" UncheckedColor="Color.Error" />
<MudSwitch @bind-Value="Basic_Switch2" Color="Color.Primary" UncheckedColor="Color.Secondary" />
<MudSwitch @bind-Value="Basic_Switch3" Color="Color.Info" UncheckedColor="Color.Warning" />
<MudSwitch T="bool" Disabled="true" UncheckedColor="Color.Dark" />

@code{
    public bool Basic_Switch1 { get; set; } = false;
    public bool Basic_Switch2 { get; set; } = true;
    public bool Basic_Switch3 { get; set; } = true;
}

Switch with label

Text can be added using the Label property and its position can be specified using the LabelPosition property

Info

Success

Warning!

Disabled

<MudSwitch @bind-Value="Label_Switch1" Label="Info" Color="Color.Info" />
<MudSwitch @bind-Value="Label_Switch2" Label="Success" Color="Color.Success" />
<MudSwitch @bind-Value="Label_Switch3" Label="Warning!" LabelPosition="LabelPosition.Start" Color="Color.Warning" />
<MudSwitch T="bool" Disabled="true" Label="Disabled" LabelPosition="LabelPosition.Start" />

@code{
    public bool Label_Switch1 { get; set; } = false;
    public bool Label_Switch2 { get; set; } = true;
    public bool Label_Switch3 { get; set; } = true;
}

Thumb Icon

An icon can be determined with ThumbIcon parameter.

Basic

Colored

Changing

<MudSwitch @bind-Value="_checked1" ThumbIcon="@Icons.Custom.Brands.MudBlazor">Basic</MudSwitch>
<MudSwitch @bind-Value="_checked2" ThumbIcon="@Icons.Custom.Brands.MudBlazor" ThumbIconColor="Color.Info">Colored</MudSwitch>
<MudSwitch @bind-Value="_checked3" ThumbIcon="@(_checked3==true ? Icons.Material.Filled.Done : Icons.Material.Filled.Close)" ThumbIconColor="@(_checked3==true ? Color.Success : Color.Error)">Changing</MudSwitch>

@code{
    bool _checked1 = false;
    bool _checked2 = false;
    bool _checked3 = false;
}